<template>
	<div class="personal">
		<router-link class="info" to='/personal/receipt'>
			<div class="info">
				<div class="center">
					<h3>{{userInfo.user_login}}</h3>
					<span>查看或编辑个人信息</span>
				</div>
			</div>
			<i class="iconfont icon-jiantou"></i>
		</router-link>

		<ul class="options">
			<router-link tag='li' to='personal/passEdit'>
				<div class="l">
					<i class="iconfont icon-icon-mima"></i>
					<span>密码修改</span>
				</div>
				<div class="r">
					<i class="iconfont icon-jiantou"></i>
				</div>
			</router-link>
			<router-link to='personal/trding' tag='li'>
				<div class="l">
					<i class="iconfont icon-jilu-yanglao"></i>
					<span>交易记录</span>
				</div>
				<div class="r">
					<i class="iconfont icon-jiantou"></i>
				</div>
			</router-link>
            <router-link tag='li' to='personal/remind'>
				<div class="l">
					<i class="iconfont icon-weibiaoti-"></i>
					<span>个人资产</span>
				</div>
				<div class="r">
					<i class="iconfont icon-jiantou"></i>
				</div>
            </router-link>
		</ul>
		<ul class="options">
			<router-link to='personal/custom' tag='li'>
				<div class="l">
					<i class="iconfont icon-msnui-service-call"></i>
					<span>联系客服</span>
				</div>
				<div class="r">
					<i class="iconfont icon-jiantou"></i>
				</div>
			</router-link>
		</ul>
		<input type="button" value="退出登录" @click='loginOutShow = true' class="loginOut">

		<confirm v-model="loginOutShow" :title='`确定要退出吗？`' @yes='outLogin'></confirm>

		<transition name='breadcrumb'>
			<router-view/>
		</transition>
	</div>
</template>

<script>
import Confirm from '../../components/component/confirm/confirm'
import { getUserInfo, loginOut } from '../../config/getData'
import { mapActions } from 'vuex'

export default {
    data(){
        return {
			userInfo:{},
			loginOutShow: false
        }
    },
	methods: {
		...mapActions([
			'setUserInfo',
			'removeUser'
		]),
		outLogin(){
			loginOut().then( res => {
				//删除 vuex 中用户数据
				this.removeUser()

				var isShowNot = typeof localStorage.isShowNot == 'string' ? JSON.parse(localStorage.isShowNot) : false
				if(isShowNot){
					isShowNot.look = false
					localStorage.isShowNot = JSON.stringify(isShowNot)
				}

				this.$router.push('/login')
			})
		}
    },
    created(){
        getUserInfo().then( res => {
				console.log(res)
			this.setUserInfo(res.data)
            this.userInfo = res.data
        })
	},
	components:{
		Confirm
	}
}
</script>


<style lang="scss" scoped>
@import '../../assets/css/all.scss';

.personal{min-height: 100%;width:100%;position: relative;
	.options{margin-top:10px;
		li{display: flex;justify-content: space-between;background-color: white;line-height: 50px;padding:0 16px;font-size:16px;align-items:center;
			.l,.r{display: flex;align-items: center;}
			.r b{color:#666;}
			.l i{font-size: 22px;margin-right: 15px;color:$red;}
			.r i{margin-left: 15px;color:#9A9A9A;}
			b{font-weight: normal;}
		}
		li + li{border-top:1px solid #f5f5f5;}
	}

	.info{display: flex;padding:10px;background-color: white;align-items: center;
		justify-content: space-between;
		.avatar{@include wh(70px,70px);border-radius: 100%;overflow: hidden;}
		.center{flex:1;
			h3{font-weight: normal;font-size:16px;}
			span{color:#666;font-size:13px;}
		}
		i{font-size:25px;padding:10px 0 10px 20px;color:#b1b1b1;}
	}
	.loginOut{width:80%;height:45px;background-color: transparent;color:$red;font-size: 16px;border:1px solid $red;border-radius: 4px;margin:40px auto;display: block;}
}
</style>

